import React from 'react';
import { Row, Col } from 'antd';
import {
  ProfileOutlined,
  ShoppingOutlined,
  TeamOutlined,
  FileAddOutlined,
  FireOutlined,
  TransactionOutlined,
  SoundOutlined,
  ShopOutlined,
} from '@ant-design/icons';
import '../../components/Order/Masks/index.scss';
import { useNavigate,useLocation } from 'react-router-dom';
// import { Line } from '@ant-design/charts';
import './index.scss';

export default function DashboardLayer() {
  const navigate = useNavigate();
  const location=useLocation()
  const agendaData = [
    {
      id: 1,
      num: 785,
      title: '待支付订单',
    },
    {
      id: 2,
      num: 6713,
      title: '待发货订单',
    },
    {
      id: 3,
      num: 237,
      title: '待售后订单',
    },
    {
      id: 4,
      num: 645,
      title: '库存不足商品',
    },
    {
      id: 5,
      num: 7,
      title: '广告位即将到期',
    },
    {
      id: 6,
      num: 45,
      title: '活动即将到期',
    },
  ];
  const iconSize = 30;
  const funcData = [
    {
      id: 1,
      title: '订单查询',
      icon: (
        <ProfileOutlined style={{ fontSize: iconSize, color: '#fbb13d' }} />
      ),
      path: '/home/order-management',
    },
    {
      id: 2,
      title: '商品管理',
      icon: (
        <ShoppingOutlined style={{ fontSize: iconSize, color: '#2cace2' }} />
      ),
      path: '/home',
    },
    {
      id: 3,
      title: '发布商品',
      icon: (
        <FileAddOutlined style={{ fontSize: iconSize, color: '#5bc8b7' }} />
      ),
      path: '/home',
    },
    {
      id: 4,
      title: '退款维权',
      icon: (
        <TransactionOutlined style={{ fontSize: iconSize, color: '#f99f3b' }} />
      ),
      path: '/home',
    },
    {
      id: 5,
      title: '发货管理',
      icon: <ShopOutlined style={{ fontSize: iconSize, color: '#ff5f34' }} />,
      path: '/home',
    },
    {
      id: 6,
      title: '客户管理',
      icon: <TeamOutlined style={{ fontSize: iconSize, color: '#2d93d8' }} />,
      path: '/home',
    },
    {
      id: 7,
      title: '广告管理',
      icon: <SoundOutlined style={{ fontSize: iconSize, color: '#a493db' }} />,
      path: '/home',
    },
    {
      id: 8,
      title: '热搜词管理',
      icon: <FireOutlined style={{ fontSize: iconSize, color: '#de445b' }} />,
      path: '/home',
    },
  ];
  const todayData = [
    {
      id: 1,
      num: 785645,
      title: '支付人数',
    },
    {
      id: 2,
      num: 671367,
      title: '支付笔数',
    },
    {
      id: 3,
      num: 23798,
      title: '支付金额',
    },
    {
      id: 4,
      num: 785645,
      title: '客单价',
    },
  ];
  const flowData = [
    {
      Date: '2022-06-16',
      scales: 670,
      category: '浏览量',
    },
    {
      Date: '2022-06-16',
      scales: 2250,
      category: '访客数',
    },
    {
      Date: '2022-06-17',
      scales: 980,
      category: '浏览量',
    },
    {
      Date: '2022-06-17',
      scales: 3780,
      category: '访客数',
    },
    {
      Date: '2022-06-18',
      scales: 1798,
      category: '浏览量',
    },
    {
      Date: '2022-06-18',
      scales: 5660,
      category: '访客数',
    },
    {
      Date: '2022-06-19',
      scales: 3675,
      category: '浏览量',
    },
    {
      Date: '2022-06-19',
      scales: 6886,
      category: '访客数',
    },
    {
      Date: '2022-06-20',
      scales: 4230,
      category: '浏览量',
    },
    {
      Date: '2022-06-20',
      scales: 7780,
      category: '访客数',
    },
    {
      Date: '2022-06-21',
      scales: 5766,
      category: '浏览量',
    },
    {
      Date: '2022-06-21',
      scales: 8230,
      category: '访客数',
    },
    {
      Date: '2022-06-22',
      scales: 6130,
      category: '浏览量',
    },
    {
      Date: '2022-06-22',
      scales: 8466,
      category: '访客数',
    },
    {
      Date: '2022-06-23',
      scales: 6657,
      category: '浏览量',
    },
    {
      Date: '2022-06-23',
      scales: 8968,
      category: '访客数',
    },
    {
      Date: '2022-06-24',
      scales: 7098,
      category: '浏览量',
    },
    {
      Date: '2022-06-24',
      scales: 9123,
      category: '访客数',
    },
    {
      Date: '2022-06-25',
      scales: 7120,
      category: '浏览量',
    },
    {
      Date: '2022-06-25',
      scales: 9523,
      category: '访客数',
    },
  ];
  const flowConfig = {
    height: 200,
    data: flowData,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      label: {
        formatter: v => {
          const arr = v.split('-');
          return arr[1] + '-' + arr[2];
        },
      },
    },
    yAxis: {
      label: {
        formatter: v => `${v}W`,
      },
      grid: {
        line: {
          style: {
            stroke: 'black',
            lineWidth: 0.5,
            lineDash: [1, 3],
            strokeOpacity: 0.7,
            cursor: 'pointer',
          },
        },
      },
    },
    seriesField: 'category',
    smooth: true,
    color: ['#15d4a3', '#ff0101'],
    legend: {
      //  图例相对于画布的位置
      position: 'top-right',
      // 每个图例的样式
      items: [
        {
          name: '浏览量',
          marker: {
            symbol: 'circle',
            style: {
              fill: '#15d4a3',
            },
          },
        },
        {
          name: '访客量',
          marker: {
            symbol: 'circle',
            style: {
              fill: '#ff0101',
            },
          },
        },
      ],
    },
  };
  const handleAgenda = id => {
    if (id === 1) {
      navigate('/home/order-management', { state: { defaultVal: '1',from:location.pathname } });
    }
  };
  return (
    <>
      <Row>
        <Col span={16} style={{ marginRight: 20 }}>
          <Row className='masks-layer'>
            <Row>
              <h2>待办事项</h2>
            </Row>
            <Row className='agenda-content'>
              {agendaData.map(el => (
                <Col
                  className='agenda-item'
                  key={el.id}
                  onClick={() => {
                    handleAgenda(el.id);
                  }}>
                  <h3>{el.num}</h3>
                  <p>{el.title}</p>
                </Col>
              ))}
            </Row>
          </Row>
          <Row className='masks-layer'>
            <Row>
              <h2>常用功能入口</h2>
            </Row>
            <Row className='func-content'>
              {funcData.map(el => (
                <Col
                  className='func-item'
                  key={el.id}
                  style={{ textAlign: 'center' }}
                  onClick={() => {
                    navigate(el.path);
                  }}>
                  {el.icon}
                  <p>{el.title}</p>
                </Col>
              ))}
            </Row>
          </Row>
          <Row className='masks-layer'>
            <Row>
              <h2>今日数据概览</h2>
            </Row>
            <Row className='agenda-content'>
              {todayData.map(el => (
                <Col className='agenda-item' key={el.id}>
                  <h3>{el.num}</h3>
                  <p>{el.title}</p>
                </Col>
              ))}
            </Row>
          </Row>
          <Row justify='space-between' gutter={[16, 16]}>
            <Col span={12}>
              <Row className='masks-layer'>
                <Row>
                  <h2>流量趋势</h2>
                </Row>
                <Row>
                  <div style={{ width: '100%' }}>
                    {/* <Line {...flowConfig} /> */}
                  </div>
                </Row>
              </Row>
            </Col>
            <Col span={12}>
              <Row className='masks-layer'>
                <Row>
                  <h2>转化趋势</h2>
                </Row>
                <Row>
                  <div style={{ width: '100%' }}>
                    {/* <Line {...flowConfig} /> */}
                  </div>
                </Row>
              </Row>
            </Col>
          </Row>
          <Row justify='space-between' gutter={[16, 16]}>
            <Col span={12}>
              <Row className='masks-layer'>
                <Row>
                  <h2>流量趋势</h2>
                </Row>
                <Row>
                  <div style={{ width: '100%' }}>
                    {/* <Line {...flowConfig} /> */}
                  </div>
                </Row>
              </Row>
            </Col>
            <Col span={12}>
              <Row className='masks-layer'>
                <Row>
                  <h2>转化趋势</h2>
                </Row>
                <Row>
                  <div style={{ width: '100%' }}>
                    {/* <Line {...flowConfig} /> */}
                  </div>
                </Row>
              </Row>
            </Col>
          </Row>
        </Col>
        <Col span={7}>
          <Row className='masks-layer'>
            <Row>
              <h2>营销日历</h2>
            </Row>
          </Row>
          <Row className='masks-layer'>
            <Row>
              <h2>商品销量排行</h2>
            </Row>
          </Row>
          <Row className='masks-layer'>
            <Row>
              <h2>销售金额排行</h2>
            </Row>
          </Row>
        </Col>
      </Row>
    </>
  );
}
